<template>
     <div id="app">
        <input v-model="text">
        <button class="but" @click="add">添加</button>
        <p>{{text}}</p>
        <hr>
        <p v-for="(item,index) in arr" :key="index">
            <span class="as" >{{item}}</span>
            <button class="but" @click="clear(index)">删除</button><br>
        </p>
        <span v-show="index!=0">总计：{{index}}条</span>
    </div>
</template>

<script>
export default {
    data(){
      return{
                text: '',
                arr: [],
                index: 0
            }
        },
            methods: {
                add() {
                    if (this.text) {
                        this.arr.push(this.text)
                        this.index = this.index + 1
                    }
                },
                clear(index) {
                    this.arr.splice(index, 1)
                    this.index = this.index - 1
                }
            }
}
</script>
<style scoped>
.as{
border-radius: 2px;
				width: 100px;
				height: 40px;
				color: white;
        background: #909399;
}
.but{
  border: 1px solid #ccc;
				border-radius: 10px;
				width: 100px;
				height: 40px;
				color: white;
        background: #909399;
}
</style>
